<template lang="html">
    <div id="temp">
        <slider :imgs = "imgs"></slider>
        <!--2.0 实现商品购买区-->
        <div id="buy">
            <h4 v-text="info.title"></h4>
            <p class="line"></p>
            <ul>
                <li class="price">
                    市场价: <s>￥{{info.market_price}}</s>    销售价：<span>￥{{info.sell_price}}</span>
                </li>
                <li style="position: relative;">
                    购买数量：<inputNumber class="inputnum"  v-on:send = "getdata"></inputNumber>
                    <transition
                            @before-enter = "beforeenter"
                            @enter = "enter"
                            @after-enter = "afterenter"
                    >
                        <div v-if="isshow" id="ball"></div>
                    </transition>
                </li>
                <li>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click = "toshopcar">加入购物车</mt-button>
                </li>
            </ul>
        </div>

        <div id="params">
            <h6>商品参数</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{info.goods_no}}</li>
                <li>库存情况：{{info.stock_quantity}}</li>
                <li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
            </ul>
        </div>
        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
                <mt-button  class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to:'/goods/goodscomment/'+id}">
                <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import {vm ,countstr} from '../../kits/vm.js';
    import slider from '../subcom/slider.vue';
    import inputNumber from '../subcom/inputNumber.vue'
    import {valueobj,setItem} from '../../kits/localstorage.js'
    export default {
        components:{
            slider,
            inputNumber
        },
        data(){
            return {
                isshow:false,
                id:0,
                imgs:[],
                info:{},
                inputcontent:1
            }
        },
        created(){
            this.id = this.$route.params.id;
            this.getimgs();
            this.getinfo();
        },
        methods:{
            beforeenter(el){
                el.style.transform = "translate(0,0)"
            },
            enter(el,done){
              el.offsetWidth;
              el.style.transform = "translate(290px,446px)";
              done();
            },
            afterenter(el){
              this.isshow = !this.isshow;
            },
            toshopcar(){
                vm.$emit(countstr,this.inputcontent);
                valueobj.goodsid = this.id;
                valueobj.count = this.inputcontent;
                setItem(valueobj);
                this.isshow = !this.isshow;
            },
            getdata(input){
                this.inputcontent = input;
            },
            getinfo(){
                var url = 'http://182.254.146.100:8899/api/goods/getinfo/'+this.id;
                this.$http.get(url).then(function(response){
                    var data = response.body;
//                    console.log(data);
                    // if(data.status !=0){
                    // 	Toast(data.message);
                    // 	return
                    // }
                    this.info = data.message[0];
                })
            },
            getimgs(){
                var url = 'http://182.254.146.100:8899/api/getthumimages/'+this.id;
                this.$http.get(url).then(function(response){
                    var data = response.body;
//                    console.log(data);
                    // if(data.status !=0){
                    // 	Toast(data.message);
                    // 	return
                    // }
                    this.imgs = data.message;
                })
            }
        }

    }
</script>
<style scoped>
    #ball{
        position: absolute;
        left:125px;
        top:5px;
        width:20px;
        height:20px;
        border-radius:10px;
        background-color: red;
        z-index: 100;
        transition:all 2s ease;
    }
    .silder{
        border:1px solid rgba(0,0,0,0.4);
        border-radius: 5px;
        margin: 5px;
    }

    #buy,#params,#other
    {
        margin: 5px;
        padding: 5px;
        border:1px solid rgba(0,0,0,0.4);
        border-radius: 5px;
    }
    .line{
        height: 1px;
        border: 1px solid rgba(0,0,0,0.2);
    }
    #buy ul,#params ul{
        padding-left: 0px;
    }
    #buy h4{
        color:#0094ff;
        padding: 5px;
    }
    #buy li,#params li{
        list-style: none;
        padding: 8px;
    }
    #buy .price span{
        color:red;
    }
    #other .imgdesc{
        margin-bottom: 20px;
    }
    .inputnum{
        position: absolute;
        top: 5px;
        left:120px;
    }
</style>